<!DOCTYPE html>

<html lang="fr">

<head>

  <meta charset="UTF-8" />

  <title>Questionnaire Vacances</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background: #f0f2f5;

      padding: 20px;

      color: #333;

      max-width: 800px;

      margin: auto;

    }

    h1 {

      text-align: center;

      color: #2c3e50;

    }

    .question {

      margin-bottom: 20px;

    }

    label {

      font-weight: bold;

    }

    select, button {

      margin-top: 5px;

      padding: 8px;

      width: 100%;

      max-width: 400px;

    }

    button {

      background-color: #3498db;

      color: white;

      border: none;

      cursor: pointer;

    }

    button:hover {

      background-color: #2980b9;

    }

    #resultat {

      margin-top: 30px;

      background: #ecf0f1;

      padding: 15px;

      border-radius: 5px;

    }

  </style>

</head>

<body>

  <h1>Quel voyage est fait pour toi ?</h1>

  <form id="questionnaire">

    <div class="question">

      <label for="periode">Période de départ :</label><br />

      <select id="periode">

        <option value="">-- Choisir --</option>

        <option value="été">Été</option>

        <option value="hiver">Hiver</option>

        <option value="printemps_automne">Printemps / Automne</option>

      </select>

    </div>

 

    <div class="question">

      <label for="budget">Budget par personne :</label><br />

      <select id="budget">

        <option value="">-- Choisir --</option>

        <option value="faible">Moins de 500€</option>

        <option value="moyen">500€ à 2000€</option>

        <option value="élevé">2000€ et plus</option>

      </select>

    </div>

 

    <div class="question">

      <label for="plage">Envie de plage ?</label><br />

      <select id="plage">

        <option value="">-- Choisir --</option>

        <option v